<template>
  <div class="cmt-container">
    <h4>发表评论</h4>
    <textarea placeholder="请输入要BB的内容（做多吐槽120字）" maxlength="120"></textarea>
    <van-button type="primary" size="large" @click="fabiao">发表评论</van-button>

    <div class="cmt-list" v-for="(item,i) in comments" :key="item.id">
      <div class="cmt-item">
        <div class="cmt-title">
          第{{i}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time}}
        </div>
        <div class="cmt-body">
          <!-- {{ item.content === 'undefined' ? '此用户很懒，嘛都没说': item.content }} -->
          {{item.content}}
        </div>
      </div>

    </div>

    <van-button plain type="primary" size="large">加载更多</van-button>
    
  </div>
</template>

<script>
export default {
  data: () => ({
    comments: [], // 所有的评论数据
    pageindex: 1
  }),
  created() {
    this.getDatail();
  },
  props:['id'],
  methods: {
    // getDatail(){
    //   this.$http.get("api/getnew/"+this.id).then(result=>{
    //     console.log(result.body)

    //   })
    // }
    async getDatail() {
      const {
        body: { status, message }
      } = await this.$http.get("api/getcomments/" + this.id +'?pageindex='+ this.pageindex);
      console.log(message)
    if(status === 0){
      this.comments=this.comments.concat(message)
    }
    },
    async fabiao(){
      // api/postcomment/:artid
      const {
        body:{status,message}
      } = await this.$http.post("api/postcomment/" +$route.params.id)
    }
  }

  // // es7,不需要.then
  // async getNewsInfo(){
  //   const {
  //      body: {status,message}
  //      } = await this.$http.get('api/getnew/${this.id}');
  //   if(status === 0){
  //     this.getNewsInfo = message;
  //   }else
  //   consolle.log("获取新闻失败")
  // }
};
</script>

<style lang="less" scoped>
.cmt-container {
  h3 {
    font-size: 18px;
    text-align:center;
  }
  textarea {
    width: 98%;
    font-size: 14px;
    height: 85px;
    margin: 0;
  }

  .cmt-list {
    margin: 5px 0;
    .cmt-item {
      font-size: 13px;
      .cmt-title {
        line-height: 30px;
        background-color: #ccc;
      }
      .cmt-body {
        line-height: 35px;
        text-indent: 2em;
      }
    }
  }
}
</style>
